<template>
  <section class="article-detail" v-if="article">
    <h1 class="title">{{ article.title }}</h1>
    <div class="meta">
      <span>作者：{{ article.author }}</span>
      <span>分类：{{ article.category.name }}</span>
      <span>发布时间：{{ dayjs(article.pub_time).format('YYYY-MM-DD HH:mm') }}</span>
    </div>
    <div class="tags">
      <el-tag v-for="tag in article.tags" :key="tag.id" type="info" class="tag" size="small">
        {{ tag.name }}
      </el-tag>
    </div>
    <img :src="article.cover_url || noPicture" class="cover-image" alt="封面"/>
    <div class="content" v-html="article.content"></div>
  </section>
</template>


<script setup>
import {computed, onMounted} from 'vue'
import {useRoute} from 'vue-router'
import {useArticleDetailStore} from '@/stores/article.js'
import dayjs from 'dayjs'
import noPicture from '@/assets/nopicture.jpg'

const route = useRoute()
const articleDetailStore = useArticleDetailStore()
const {id, slug} = route.params

onMounted(async () => {
  await articleDetailStore.fetchArticleDetail(id, slug)
})

const article = computed(() => articleDetailStore.articleDetail)
</script>


<style scoped>
.article-detail {
  width: 90%;
  margin: 0 auto;
  padding: 24px;
}

.cover-image {
  max-width: 100%;
}

.content {
  line-height: 1.8;
}
</style>